<template>
  <div class="content-box">
    <div class="item" v-for="(section, idx) in runData" :key="idx">
      <span class="icon"><img :src="section.icon"></img></span>
      <div v-for="(row, rowIdx) in section" :key="rowIdx" class="row">
        <span v-for="(item, itemIndex) in row.split([':'])" :key="itemIndex">
          {{item}} {{itemIndex===0?'：':''}}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      iconList: ['电池', '计时', '更多'],
      runData: []
    }
  },
  methods: {
    // 切换Tab
    switchTab(index) {
      this.currentTab = index
    },
    getData() {
      const data = [
        ['电池类型: 锂电', '开灯电压: 5V', '开灯延时: 5秒', '过充电压: 25.2V', '欠压保护: 18V', '欠压返回: 18.3V'],
        ['工作模式: 感应', '无人电流: 50mA', '无人延时: 60秒', '电池容量: 40Ah', '低温充: 关闭', '低温放: 关闭', '市电换: 关闭'],
        ['一段: 1440分钟 10000mA', '二段: 0分钟 0mA', '三段: 0分钟 0mA', '四段: 0分钟 0mA', '五段: 0分钟 0mA', '亮亮: 0分钟 0mA']
      ]

      data.forEach((item, index) => {
        item.icon = new URL(`../../../assets/image/lvneng/policyData/${this.iconList[index]}.png`, import.meta.url).href
      })
      this.runData = data
    }
  },
  mounted() {
    this.getData()
  }
};
</script>

<style scoped lang="less">
.content-box {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.item {
  margin: 20px 0;
  padding: 18px;
  background: url(../../../assets/image/lvneng/policyData/kuang.png) 0px 0px no-repeat;
  background-size: 100% 100%;
  margin-top: 70px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;

  .icon {
    position: absolute;
    transform: -50%;
    left: calc(50% - 44px);
    top: -64px;
    width: 88px;
    height: 88px;
    background: url(../../../assets/image/lvneng/icon_bg.png) 0px 0px no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .row {
    display: flex;
    justify-content: space-between;
    font-size: 110%;
    line-height: 1.8;
  }
}
</style>
